<template>
	<div class="view">
		<Modal v-model="data.isShow" :mask-closable="false">
			<p slot="header">
				<span>{{data.actionType == 1 ? '新建' : '编辑'}} 客服</span>
			</p>
			<div style="margin-top: 10px;padding-right: 20px;">
				<Form ref="form" :model="data.data" :rules="ruleValidate" :label-width="100">
					<FormItem label="客服" prop="customerService">
						<Input v-model="data.data.customerService" placeholder="请输入客服" :maxlength="100"/>
					</FormItem>
				</Form>
			</div>
			<div slot="footer">
				<Button
					type="primary"
					size="large"
					:loading="data.isSubmitLoading"
					@click="handleSubmit()">
					{{data.actionType == 1 ? '新建' : '编辑'}}
				</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	props: ['data'],
	data () {
		return {
			ruleValidate: {
				// customerService: [
				// 	{ required: true, message: '客服不能为空', trigger: 'blur' }
				// ],
			}
		}
	},
	mounted(){
		console.log(this.data);
	},
	watch: {
		data(val,old){
			console.log(val);
		}
	},
	methods: {
		handleSubmit () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$emit('on-submit-action', this.data);
				} else {
					this.$Message.error('表单验证失败!');
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.view {

}
</style>
